<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>首页</title>
  <link rel="stylesheet" href="../assets/css/tea-style.css">
  <link rel="stylesheet" href="../common/swiper/swiper-bundle.min.css">
  <script src="../common/swiper/swiper-bundle.min.js"></script>
  <script src="../jquery/jquery-3.6.0.min.js"></script>

</head>

<body>
  <!-- top -->
  <div class="tea-top ">
    <div class="tea-cont content flex">
      <div class="top-left">
        <h1>品味茶叶</h1>
      </div>
      <ul class="flex">
        <li><a href="index.html" class="active">首页</a></li>
        <li><a href="product.html">产品展示</a></li>
        <li><a href="industry.html">行业资讯</a></li>
        <li><a href="culture.html">茶文化</a></li>
        <li><a href="about.html">联系我们</a></li>
      </ul>
    </div>
    <img src="../img/mores.png" alt="" class="more" id="mores">
    <ul class="iphone" id="iphones">
      <li><a href="index.html" class="actives">首页</a></li>
      <li><a href="product.html">产品展示</a></li>
      <li><a href="industry.html">行业资讯</a></li>
      <li><a href="culture.html">茶文化</a></li>
      <li><a href="about.html">联系我们</a></li>
    </ul>
  </div>
  <!-- banner 轮播图 -->
  <div class="tea-banner">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../img/index-banner.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../img/index-banner.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../img/index-banner.png" alt="">
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-scrollbar"></div>
    </div>
  </div>
  <!-- tea 分类 -->
  <div class="main-list">
    <div class="main-cont contents flex">
      <dl>
        <dt><img src="../img/tea1.png" alt=""></dt>
        <dd>红茶</dd>
      </dl>
      <dl>
        <dt><img src="../img/tea2.png" alt=""></dt>
        <dd>乌龙茶</dd>
      </dl>
      <dl>
        <dt><img src="../img/tea3.png" alt=""></dt>
        <dd>红茶</dd>
      </dl>
      <dl>
        <dt><img src="../img/tea4.png" alt=""></dt>
        <dd>普洱茶</dd>
      </dl>
    </div>

  </div>
  <!-- 茶文化 -->
  <div class="tea-culture ">
    <h1>【 茶文化 】</h1>
    <div class="main-culture contents">
      中华茶道，源远流长，却被忙碌浮躁的现代人所怠慢。</br>
      红尘滚滚,沧海逐浪，人生,总值得在这样一个清静的黄昏，</br>
      停下疲惫的脚步，泡一壶茶，</br>
      雕刻一段美好的时光，于满心的欣喜里，</br>
      慢慢品味愉得浮生半日闲的惬意...</br>
    </div>

  </div>
  <!-- 茶道 -->
  <div class="tea-ceremony">
    <div class="main-ceremony ">
      <div class="ceremony-title">
        <span>茶</span>
        <span>道</span>
      </div>
      <div class="ceremony-title">
        烹饪好茶，尝百味人生，香满万家
      </div>
    </div>

  </div>
  <!-- 茶图 -->
  <div class="tea-photo contents ">
    <div class="main-photo flex">
      <img src="../img/tea5.png" alt="" class="photo-1">
      <img src="../img/tea6.png" alt="" class="photo-1">
      <div class="photo-2">
        <img src="../img/tea7.png" alt="">
        <img src="../img/tea8.png" alt="">
      </div>
    </div>
    <div class="main-photo flex  two-flex">
      <img src="../img/tea9.png" alt="">
      <img src="../img/tea10.png" alt="">
      <img src="../img/tea11.png" alt="">
    </div>
  </div>
  <!-- 原茶 -->
  <div class="raw-tea ">

  </div>
  <!-- 正宗私房茶 -->
  <div class="authentic-tea">
    <img src="../img/cd1.png" alt="" class="authentic-top">
    <div class="authentic-bottom flex contents">
      <div class="authentic-left">
        <img src="../img/zzsfc.png" alt="">
      </div>
      <div class="authentic-right flex">
        <img src="../img/tea12.jpg" alt="">
        <img src="../img/tea15.png" alt="">
        <img src="../img/tea14.png" alt="">
        <img src="../img/tea15.png" alt="">
        <img src="../img/tea16.png" alt="">
        <img src="../img/tea17.png" alt="">

      </div>
    </div>

  </div>
  </div>
  <!-- bottom -->
  <div class="tea-bottom">
    <div class="contents flex bottom-cont">
      <div>
        客服热线:(周一周五9:00-18:00) </br>
        000-00000000 </br>
        客服电话:020-000000 </br>
        客服QQ:177488228 </br>
        客服邮箱:xxx@.co.m </br>
      </div>
      <ul>
        <li><a href="/view/index.html">首页</a></li>
        <li><a href="/view/product.html">所有产品</a></li>
        <li><a href="/view/industry.html">产业资讯</a></li>
        <li><a href="/view/culture.html">茶文化</a></li>
      </ul>
      <div>
        品牌故事 </br>
        留言板 </br>

      </div>
    </div>
    <p>@20220912网站设计---茶叶版权所有
    </p>

  </div>



  <script>
    $(function () {
      $("#mores").click(function () {
        var mo = $("#mores").attr('src')
        if (mo == '../img/mores.png') {
          $("#mores").attr("src", "../img/cancels.png")
          $("#iphones").addClass("show")
        } else {
          $("#mores").attr("src", "../img/mores.png")
          $("#iphones").removeClass("show")
        }
      })



    })



    var mySwiper = new Swiper('.swiper', {

      autoplay: true,//可选选项，自动滑动
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
      },
    })
    //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
    // new Swiper('.swiper')
    // var mySwiper = document.querySelector('.swiper').swiper
    // mySwiper.slideNext();
  </script>
</body>

</html>